<template>
    <div class="star" :class="starType">
        <span v-for="(itemClass,index) in itemClasses" :class="itemClass" class="star-item" :key="index"></span>
    </div>
</template>

<script>
    // ------常量------
    // 星星长度
    const LENGTH = 5
    // 全星（与类名对于）
    const CLS_ON = 'on'
    // 半星
    const CLS_HALF = 'half'
    // 空星
    const CLS_OFF = 'off'

    export default {
        props: {
            // 需要的大小
            size: {
                type: Number
            },
            // 得分，根据得分计算星星数
            score: {
                type: Number
            }
        },
        computed: {
            // 星星尺寸
            starType() {
                return 'star-' + this.size
            },
            // 应该显示的星星数组
            itemClasses() {
                // 结果数组
                let result = []
                //  运算后结果：4.3 => 4；4.6 => 4.5
                const score = Math.floor(this.score * 2) / 2
                // 是否有半星
                const hasDecimal = score % 1 !== 0
                // 全星的数量
                const integer = Math.floor(score)
                // 添加全星class
                for (let i = 0; i < integer; i++) {
                    result.push(CLS_ON)
                }
                // 添加半星class
                if (hasDecimal) {
                    result.push(CLS_HALF)
                }
                // 将数组填满要求数量的数据
                while (result.length < LENGTH) {
                    result.push(CLS_OFF)
                }
                return result
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "~common/stylus/mixin.styl"

    .star
        display: flex
        align-items: center
        justify-content: center
        .star-item
            background-repeat: no-repeat
        &.star-48
            .star-item
                width: 20px
                height: 20px
                margin-right: 22px
                background-size: 20px 20px
                &:last-childx
                    margin-right: 0
                &.on
                    bg-image('images/star48_on')
                &.half
                    bg-image('images/star48_half')
                &.off
                    bg-image('images/star48_off')
        &.star-36
            .star-item
                width: 15px
                height: 15px
                margin-right: 6px
                background-size: 15px 15px
                &:last-child
                    margin-right: 0
                &.on
                    bg-image('images/star36_on')
                &.half
                    bg-image('images/star36_half')
                &.off
                    bg-image('images/star36_off')
        &.star-24
            .star-item
                width: 10px
                height: 10px
                margin-right: 3px
                background-size: 10px 10px
                &:last-child
                    margin-right: 0
                &.on
                    bg-image('images/star24_on')
                &.half
                    bg-image('images/star24_half')
                &.off
                    bg-image('images/star24_off')
</style>
